<template>
  <div class="app-container">
    <div class="customContainer">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-date-picker
            v-model="pickerDate"
            value-format="yyyy.MM.dd"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <!-- <el-select placeholder="选择品牌" v-model="formInline.brand" @change="brandChange">
                        <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
          </el-select>-->
          <el-select filterable placeholder="选择门店" v-model="formInline.store_id">
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.type">
            <el-option label="礼品销售" value="0"></el-option>
            <el-option label="物品销售" value="2"></el-option>
            <el-option label="员工内买" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="支付类型:" v-model="formInline.pay_type">
            <el-option v-for="item in pay_type" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="formInline.gift_id" placeholder="请输入礼品编号/礼品名称"></el-input>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick">
            <template #default>搜索</template>
          </dj-button>
        </el-form-item>
      </el-form>

      <!-- 列表 -->
      <el-table highlight-current-row :data="list" border size="small">
        <el-table-column align="center" label="商品图片" width="70">
          <template slot-scope="scope">
            <img :src="scope.row.thumb" width="50" height="50" alt />
          </template>
        </el-table-column>
        <el-table-column align="center" label="新商品编号" prop="gift_id"></el-table-column>
        <el-table-column align="center" label="神采编号" prop="no_obsolete"></el-table-column>
        <el-table-column align="center" label="商品名称" prop="gift_name"></el-table-column>
        <el-table-column align="center" label="商品类别" prop="gift_type"></el-table-column>
        <el-table-column align="center" label="销售数量" prop="num"></el-table-column>
        <el-table-column align="center" label="销售金额">
          <template slot-scope="scope">{{scope.row.total_money|keepTwoNum}}</template>
        </el-table-column>
        <el-table-column v-if="is_buy" align="center" label="操作员工">
          <template slot-scope="scope">{{scope.row.nick?scope.row.nick:'-'}}</template>
        </el-table-column>
        <el-table-column align="center" label="支付类型" prop="pay_type"></el-table-column>
        <el-table-column align="center" label="销售时间" prop="time"></el-table-column>
      </el-table>
    </div>
    <div class="bottom_box">
      <el-pagination
        class="pull-left"
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="totalDataNumber"
      ></el-pagination>
      <el-button
        class="pull-right"
        type="primary"
        size="small"
        @click="exportClick()"
        :loading="exportLoading"
      >
        导出表格
        <count-down ref="cd" />
      </el-button>
    </div>
  </div>
</template>

<script>
import {
  getBrandList,
  getStoreList,
  getList,
  getPage,
  getExport,
} from "@/api/service/gift_sellDtails.js";
import { pickerOptionsF, pickerDateF, optionMaxTime } from "@/utils";
export default {
  data() {
    return {
      exportLoading: false,
      is_buy: false,
      pay_type: [
        { id: 0, name: "全部" },
        { id: 1, name: "现金" },
        { id: 2, name: "支付宝" },
        { id: 3, name: "微信" },
        { id: 4, name: "银行卡" },
      ],
      currentPage: 1,
      totalDataNumber: 0,
      storeList: null,
      formInline: {
        store_id: "",
        pay_type: 0,
        begin_time: "",
        type: "0",
        end_time: "",
        gift_id: "",
      },
      list: null,
      pickerOptions: pickerOptionsF(),
      pickerDate: pickerDateF(),
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      if (!vm.storeList) {
        vm.getStore();
      }
    });
  },
  methods: {
    // getBrand() {
    //     getBrandList({ org: 1, category_id: 243 }).then(response => {
    //         this.brandList = response;
    //         this.formInline.brand = response[0].id
    //         this.getStore()
    //     });
    // },
    // brandChange() {
    //     this.formInline.store_id = '';
    //     this.getStore();
    // },
    getStore() {
      // brand: this.formInline.brand,
      getStoreList({ category_id: 243 }).then((response) => {
        this.storeList = response;
        let data = response.filter(
          (res) => res.id == this.$store.getters.optionId
        );
        if (data.length > 0) {
          this.formInline.store_id = data[0].id;
        }
        if (this.list == null) {
          this.searchClick();
        }
      });
    },
    // 导出
    exportClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : "";
        this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : "";
        getExport(this.formInline);
        this.exportLoading = true;
        this.$refs.cd.countDownF(30).then(() => {
          this.exportLoading = false;
        });
      });
    },
    searchClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : "";
        this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : "";
        this.fetchData();
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.currentPage = 1;
      getPage(this.formInline)
        .then((response) => {
          this.totalDataNumber = response.page * 20;
          getList(this.formInline).then((response) => {
            this.is_buy = this.formInline.type == 1 ? true : false;
            this.list = response.list;
            this.listLoading = false;
          });
        })
        .catch((res) => {
          this.listLoading = false;
        });
    },
    // 分页
    handleCurrentChange(val) {
      this.listLoading = true;
      getList(this.formInline, val).then((response) => {
        this.is_buy = this.formInline.type == 1 ? true : false;
        this.list = response.list;
        this.listLoading = false;
      });
    },
    callOf() {
      this.searchClick();
    },
  },
};
</script>